<template>
	<div class="layuimini-container">
	    <div class="layuimini-main">
			<el-row >
				<el-col :span="4" >
					<div style="margin-top: 15px;padding-right: 20px;">
					  <el-input placeholder="请输入内容"  class="input-with-select">
					    <el-button slot="append" icon="el-icon-search"></el-button>
					  </el-input>
					</div>
					<div style="margin-top: 20px;margin-right: 20px;">
						<div style="margin: 10px 10px 10px 10px">
						    <el-tree type="submit" :data="deptData" @node-click="handleNodeClick" :props="defaultProps"></el-tree> <!--  -->
						</div>
					</div>
				</el-col>
				<el-col :span="20">
					<fieldset class="table-search-fieldset">
					    <legend>搜索信息</legend>
					    <div style="margin: 10px 10px 10px 10px">
					        <form class="layui-form layui-form-pane" action="">
					            <div class="layui-form-item">
					                <div class="layui-inline">
					                    <label class="layui-form-label">用户姓名</label>
					                    <div class="layui-input-inline">
					                        <input type="text" name="nickName" autocomplete="off" class="layui-input">
					                    </div>
					                </div>
									<div class="layui-inline">
									    <label class="layui-form-label">手机号</label>
									    <div class="layui-input-inline">
									        <input type="text" name="phone" autocomplete="off" class="layui-input">
									    </div>
									</div>
					                <div class="layui-inline">
					                    <label class="layui-form-label">性别</label>
					                    <div class="layui-input-inline">
					                        <input type="text" name="sex" autocomplete="off" class="layui-input">
					                    </div>
					                </div>
					                <div class="layui-inline">
					                    <label class="layui-form-label">邮箱</label>
					                    <div class="layui-input-inline">
					                        <input type="text" name="email" autocomplete="off" class="layui-input">
					                    </div>
					                </div>
					                <div class="layui-inline">
					                    <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
					                </div>
					            </div>
					        </form>
					    </div>
					</fieldset>
				
				</el-col>
			</el-row>
		</div>
	</div>
</template>
	<script type="text/html" id="toolbarDemo">
					    <div class="layui-btn-container">
					        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
					        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>
					    </div>
					</script>
					
					<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
					
					<script type="text/html" id="currentTableBar">
					    <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
					    <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
					</script>
<script>
	import dept from '@/api/system/manage/dept.js'
	import user from '@/api/system/memberList.js'
	export default {
		 data() {
		      return {
		        deptData: [{
					id:0,
					pid:0,
					label:"全部"
				}],
		        defaultProps: {
		          children: 'children',
		          label: 'label'
		        },
				selectData:{
					nickName:'',
					phone:'',
					deptId:'',
					sex:'',
					email:''
				}
		      };
		    },
		mounted() {
			this.initial()
			this.getDept()
		},
		methods:{
			handleNodeClick(res){
				
				var nickName = this.selectData.nickName;
				var phone = this.selectData.nickName;
				var deptId = res.id;
				var sex = this.selectData.sex;
				var email = this.selectData.email;
				
				layui.use(['form', 'table'], function () {
				    var $ = layui.jquery,
				        form = layui.form,
				        table = layui.table;
					//执行搜索重载
					table.reload('currentTableId', {
					    page: {
					        curr: 1
					    }
					    , where: {
					        nickName: nickName,
							phone:phone,
							deptId:deptId,
							sex:sex,
							email:email
					    }
					}, 'data');	
					return false;
				})
			},
			initial(){
				var as = 1
				var url = process.env.VUE_APP_BASE_API
				layui.use(['form', 'table'], function () {
				    var $ = layui.jquery,
				        form = layui.form,
				        table = layui.table;
						
					table.render({
					    elem: '#currentTableId',
						url: url+"/user/queryUserList",
					    toolbar: '#toolbarDemo',
					    defaultToolbar: ['filter', 'exports', 'print', {
					        title: '提示',
					        layEvent: 'LAYTABLE_TIPS',
					        icon: 'layui-icon-tips'
					    }],
						response: {
							statusCode: 200,
							dataName: 'list' //数据列表的字段名称，默认：data
						},
					    cols: [[
					        {type: "checkbox", width: 50},
					        {field: 'id', width: 120, title: 'ID', sort: true},
					        {field: 'nickName', width: 120, title: '用户名'},
					        {field: 'sex', width: 80, title: '性别',templet:function(data){
								return data.sex=='0'?'女':'男'
							}},
							 {field: 'userName', width: 180, title: '账号'},
							{field: 'email', title: '邮箱', Width: 150, sort: true},
					        {field: 'deptName', title: '部门', Width: 120, sort: true},
					        {field: 'roleName', width: 180, title: '角色', sort: true},
					        {field: 'phone', width: 180, title: '手机号', sort: true},
					        {field: 'createTime', width: 180, title: '加入时间'},
					        {field: 'score', width: 180, title: '积分', sort: true},
					        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
					    ]],
					    limits: [10, 15, 20, 25, 50, 100],
					    limit: 15,
					    page: true,
					    skin: 'line'
					});
				    // 监听搜索操作
				    form.on('submit(data-search-btn)', function (data) {
				        //执行搜索重载
				        table.reload('currentTableId', {
				            page: {
				                curr: 1
				            }
				            , where: {
				                nickName: data.field.nickName,
								phone:data.field.phone,
								deptId:as,
								sex:data.field.sex,
								email:data.field.email
				            }
				        }, 'data');
				
				        return false;
				    });
				    /**
				     * toolbar监听事件
				     */
				    table.on('toolbar(currentTableFilter)', function (obj) {
				        if (obj.event === 'add') {  // 监听添加操作
				            var index = layer.open({
				                title: '添加用户',
				                type: 2,
				                shade: 0.2,
				                maxmin:true,
				                shadeClose: true,
				                area: ['60%', '60%'],
				                content: '../page/table/add.html',
				            });
				            $(window).on("resize", function () {
				                layer.full(index);
				            });
				        } else if (obj.event === 'delete') {  // 监听删除操作
				            var checkStatus = table.checkStatus('currentTableId')
				                , data = checkStatus.data;
				            layer.alert(JSON.stringify(data));
				        }
				    });
				
				    //监听表格复选框选择
				    table.on('checkbox(currentTableFilter)', function (obj) {
				        console.log(obj)
				    });
				
				    table.on('tool(currentTableFilter)', function (obj) {
				        var data = obj.data;
				        if (obj.event === 'edit') {
				
				            var index = layer.open({
				                title: '编辑用户',
				                type: 2,
				                shade: 0.2,
				                maxmin:true,
				                shadeClose: true,
				                area: ['100%', '100%'],
				                content: '../page/table/edit.html',
				            });
				            $(window).on("resize", function () {
				                layer.full(index);
				            });
				            return false;
				        } else if (obj.event === 'delete') {
				            layer.confirm('真的删除行么', function (index) {
				                obj.del();
				                layer.close(index);
				            });
				        }
				    });
				
				});
			},
			getDept(){
				dept.list().then(res=>{
					if(res.code==200){
						this.deptData = [...this.deptData, ...this.getNest(res.list)]
						console.log(this.deptData)
					}
				})
			},
			getNest(res){
				var deptList = []
				var list = {}
				res.forEach((data,index)=>{
					list.label=data.name
					list.id=data.id
					list.pid=data.pid
					if(data.dept.length!=0){
						list.children=this.getNest(data.dept)
					}
					deptList.push(list)
					list={}
				})
				return deptList
			}
		    
		}
	}
</script>

<style>
</style>
